„React“ portalų įvykių tvarkymo įvaldymas: įvykių delegavimas tarp DOM medžių globalioms programoms

Plačiame ir tarpusavyje susijusiame žiniatinklio programavimo pasaulyje itin svarbu kurti intuityvias ir reaguojančias vartotojo sąsajas, pritaikytas pasaulinei auditorijai. „React“, su savo komponentais pagrįsta architektūra, suteikia galingus įrankius tam pasiekti. Tarp jų, „React“ portalai išsiskiria kaip itin veiksmingas mechanizmas, leidžiantis atvaizduoti antrinius elementus (children) DOM mazge, esančiame už pagrindinio komponento hierarchijos ribų. Ši galimybė yra neįkainojama kuriant tokius vartotojo sąsajos elementus kaip modaliniai langai, patarimai (tooltips), išskleidžiamieji meniu ir pranešimai, kuriems reikia išsilaisvinti iš tėvinio komponento stiliaus ar `z-index` išdėstymo konteksto apribojimų.

Nors portalai suteikia didžiulį lankstumą, jie sukuria unikalų iššūkį: įvykių tvarkymą, ypač kai susiduriama su sąveikomis, apimančiomis skirtingas Dokumento Objekto Modelio (DOM) medžio dalis. Kai vartotojas sąveikauja su elementu, atvaizduotu per portalą, įvykio kelionė per DOM gali nesutapti su „React“ komponentų medžio logine struktūra. Tai gali lemti netikėtą elgesį, jei nėra tinkamai sutvarkyta. Sprendimas, kurį išsamiai išnagrinėsime, slypi pagrindinėje žiniatinklio programavimo koncepcijoje: įvykių delegavime.

Šis išsamus vadovas padės išsiaiškinti įvykių tvarkymą su „React“ portalais. Gilinsimės į „React“ sintetinės įvykių sistemos subtilybes, suprasime įvykių „burbuliavimo“ (bubbling) ir gaudymo (capture) mechaniką, ir, svarbiausia, parodysime, kaip įdiegti patikimą įvykių delegavimą, kad užtikrintumėte sklandžią ir nuspėjamą vartotojo patirtį savo programose, nepriklausomai nuo jų pasaulinio pasiekiamumo ar vartotojo sąsajos sudėtingumo.

„React“ portalų supratimas: tiltas tarp DOM hierarchijų

Prieš gilinantis į įvykių tvarkymą, įtvirtinkime supratimą, kas yra „React“ portalai ir kodėl jie tokie svarbūs šiuolaikiniame žiniatinklio programavime. „React“ portalas sukuriamas naudojant `ReactDOM.createPortal(child, container)`, kur `child` yra bet koks atvaizduojamas „React“ antrinis elementas (pvz., elementas, eilutė ar fragmentas), o `container` yra DOM elementas.

Kodėl „React“ portalai yra būtini globaliai UI/UX

Įsivaizduokite modalinį dialogo langą, kuris turi pasirodyti virš viso kito turinio, neatsižvelgiant į jo tėvinio komponento `z-index` ar `overflow` savybes. Jei šis modalinis langas būtų atvaizduojamas kaip įprastas antrinis elementas, jį galėtų apkarpyti tėvinis elementas su `overflow: hidden` savybe arba jis susidurtų su sunkumais pasirodydamas virš kitų elementų dėl `z-index` konfliktų. Portalai išsprendžia šią problemą leisdami modalinį langą logiškai valdyti jo „React“ tėviniam komponentui, bet fiziškai atvaizduojant jį tiesiai į nurodytą DOM mazgą, dažnai tiesiai į document.body.

• Konteinerio apribojimų išvengimas: Portalai leidžia komponentams „pabėgti“ nuo savo tėvinio konteinerio vizualinių ir stiliaus apribojimų. Tai ypač naudinga perdangoms, išskleidžiamiesiems meniu, patarimams ir dialogo langams, kuriuos reikia pozicionuoti pagal matymo lauką (viewport) arba pačiame išdėstymo konteksto viršuje.
• „React“ konteksto ir būsenos išlaikymas: Nors komponentas atvaizduojamas kitoje DOM vietoje, per portalą atvaizduotas komponentas išlaiko savo poziciją „React“ medyje. Tai reiškia, kad jis vis tiek gali pasiekti kontekstą, gauti savybes (props) ir dalyvauti tame pačiame būsenos valdyme, tarsi būtų įprastas antrinis elementas, taip supaprastinant duomenų srautą.
• Pagerintas prieinamumas: Portalai gali būti labai svarbūs kuriant prieinamas vartotojo sąsajas. Pavyzdžiui, modalinis langas gali būti atvaizduojamas tiesiai į document.body, todėl lengviau valdyti fokuso fiksavimą ir užtikrinti, kad ekrano skaitytuvai teisingai interpretuotų turinį kaip aukščiausio lygio dialogo langą.
• Globalus nuoseklumas: Programoms, skirtoms pasaulinei auditorijai, nuoseklus vartotojo sąsajos elgesys yra gyvybiškai svarbus. Portalai leidžia programuotojams įgyvendinti standartinius vartotojo sąsajos modelius (pavyzdžiui, nuoseklų modalinių langų elgesį) įvairiose programos dalyse, nesusiduriant su kaskadinių CSS problemomis ar DOM hierarchijos konfliktais.

Įprasta sąranka apima specialaus DOM mazgo sukūrimą jūsų index.html faile (pvz., <div id="modal-root"></div>) ir tada `ReactDOM.createPortal` naudojimą turiniui atvaizduoti. Pavyzdžiui:

// public/index.html
<body>
  <div id="root"></div>
  <div id="portal-root"></div>
</body>

// MyModal.js
import React from 'react';
import ReactDOM from 'react-dom';

const portalRoot = document.getElementById('portal-root');

const MyModal = ({ children, isOpen, onClose }) => {
  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={e => e.stopPropagation()}>
        {children}
        <button onClick={onClose}>Close</button>
      </div>
    </div>,
    portalRoot
  );
};

export default MyModal;

Įvykių tvarkymo galvosūkis: kai DOM ir „React“ medžiai išsiskiria

„React“ sintetinė įvykių sistema yra abstrakcijos stebuklas. Ji normalizuoja naršyklės įvykius, todėl įvykių tvarkymas yra nuoseklus skirtingose aplinkose, ir efektyviai valdo įvykių klausytojus (listeners) per delegavimą `document` lygmenyje. Kai prie „React“ elemento pridedate `onClick` apdoroklį, „React“ tiesiogiai neprideda įvykio klausytojo prie to konkretaus DOM mazgo. Vietoj to, jis prideda vieną klausytoją tam įvykio tipui (pvz., `click`) prie `document` arba jūsų „React“ programos šakninio elemento.

Kai įvyksta tikras naršyklės įvykis (pvz., paspaudimas), jis kyla aukštyn (burbuliuoja) per natūralų DOM medį iki `document`. „React“ perima šį įvykį, apgaubia jį savo sintetiniu įvykio objektu ir tada iš naujo jį išsiunčia atitinkamiems „React“ komponentams, simuliuodamas „burbuliavimą“ per „React“ komponentų medį. Ši sistema puikiai veikia su komponentais, atvaizduotais standartinėje DOM hierarchijoje.

Portalo ypatybė: aplinkkelis DOM'e

Čia ir slypi iššūkis su portalais: nors per portalą atvaizduotas elementas logiškai yra „React“ tėvinio komponento antrinis elementas, jo fizinė vieta DOM medyje gali būti visiškai kitokia. Jei jūsų pagrindinė programa yra prijungta prie <div id="root"></div>, o jūsų portalo turinys atvaizduojamas į <div id="portal-root"></div> (esantį šalia `root`), paspaudimo įvykis, kilęs iš portalo vidaus, kils aukštyn savo *paties* natūraliu DOM keliu, galiausiai pasiekdamas `document.body`, o tada `document`. Jis *natūraliai nekils* per `div#root`, kad pasiektų įvykių klausytojus, pridėtus prie portalo *loginio* tėvinio komponento protėvių, esančių `div#root` viduje.

Šis išsiskyrimas reiškia, kad tradiciniai įvykių tvarkymo modeliai, kai galite pridėti paspaudimo apdoroklį prie tėvinio elemento tikėdamiesi pagauti visų jo antrinių elementų įvykius, gali neveikti arba elgtis netikėtai, kai tie antriniai elementai yra atvaizduoti portale. Pavyzdžiui, jei turite `div` elementą savo pagrindiniame `App` komponente su `onClick` klausytoju ir atvaizduojate mygtuką portale, kuris logiškai yra to `div` antrinis elementas, paspaudus mygtuką *nebus* suaktyvintas `div` `onClick` apdoroklys per natūralų DOM „burbuliavimą“.

Tačiau, ir tai yra esminis skirtumas: „React“ sintetinė įvykių sistema iš tiesų užpildo šią spragą. Kai iš portalo kyla natūralus įvykis, „React“ vidinis mechanizmas užtikrina, kad sintetinis įvykis vis tiek kyla aukštyn per „React“ komponentų medį iki loginio tėvinio komponento. Tai reiškia, kad jei turite `onClick` apdoroklį „React“ komponente, kuris logiškai apima portalą, paspaudimas portalo viduje *suaktyvins* tą apdoroklį. Tai yra pagrindinis „React“ įvykių sistemos aspektas, kuris įvykių delegavimą su portalais padaro ne tik įmanomu, bet ir rekomenduojamu metodu.

Sprendimas: išsamus įvykių delegavimas

Įvykių delegavimas yra projektavimo modelis, skirtas įvykiams tvarkyti, kai pridedate vieną įvykio klausytoją prie bendro protėvinio elemento, užuot pridėję atskirus klausytojus prie kelių palikuonių elementų. Kai įvykis (pvz., paspaudimas) įvyksta ant palikuonio, jis kyla aukštyn DOM medžiu, kol pasiekia protėvį su deleguotu klausytoju. Tada klausytojas naudoja `event.target` savybę, kad nustatytų konkretų elementą, kuriame įvykis kilo, ir atitinkamai reaguoja.

Pagrindiniai įvykių delegavimo pranašumai

• Našumo optimizavimas: Vietoj daugybės įvykių klausytojų turite tik vieną. Tai sumažina atminties sąnaudas ir sąrankos laiką, ypač naudinga sudėtingoms vartotojo sąsajoms su daugybe interaktyvių elementų arba globaliai diegiamoms programoms, kur išteklių efektyvumas yra itin svarbus.
• Dinaminio turinio tvarkymas: Elementai, pridėti į DOM po pradinio atvaizdavimo (pvz., per AJAX užklausas ar vartotojo sąveikas), automatiškai pasinaudoja deleguotais klausytojais, nereikalaujant naujų klausytojų pridėjimo. Tai puikiai tinka dinamiškai atvaizduojamam portalo turiniui.
• Švaresnis kodas: Įvykių logikos centralizavimas padaro jūsų kodo bazę tvarkingesnę ir lengviau prižiūrimą.
• Patikimumas skirtingose DOM struktūrose: Kaip jau aptarėme, „React“ sintetinė įvykių sistema užtikrina, kad įvykiai, kilę iš portalo turinio, *vis tiek* kyla aukštyn per „React“ komponentų medį iki savo loginių protėvių. Tai yra pagrindas, dėl kurio įvykių delegavimas yra efektyvi strategija portalams, nors jų fizinė DOM vieta skiriasi.

Įvykių „burbuliavimo“ ir gaudymo paaiškinimas

Norint visiškai suprasti įvykių delegavimą, būtina suprasti dvi įvykių sklaidos fazes DOM'e:

1. Gaudančioji fazė (Trickle Down): Įvykis prasideda nuo `document` šaknies ir keliauja žemyn DOM medžiu, aplankydamas kiekvieną protėvinį elementą, kol pasiekia tikslinį elementą. Klausytojai, registruoti su `useCapture = true` (arba „React“ pridedant `Capture` priesagą, pvz., `onClickCapture`), suveiks šios fazės metu.
2. Kylančioji fazė (Bubble Up): Pasiekus tikslinį elementą, įvykis keliauja atgal aukštyn DOM medžiu, nuo tikslinio elemento iki `document` šaknies, aplankydamas kiekvieną protėvinį elementą. Dauguma įvykių klausytojų, įskaitant visus standartinius „React“ `onClick`, `onChange` ir kt., suveikia šios fazės metu.

„React“ sintetinė įvykių sistema pirmiausia remiasi kylančiąja faze. Kai įvykis įvyksta ant elemento portale, natūralus naršyklės įvykis kyla aukštyn savo fiziniu DOM keliu. „React“ šakninis klausytojas (dažniausiai ant `document`) perima šį natūralų įvykį. Svarbiausia, „React“ tada rekonstruoja įvykį ir išsiunčia jo *sintetinį* atitikmenį, kuris *simuliuoja kilimą aukštyn „React“ komponentų medžiu* nuo komponento portale iki jo loginio tėvinio komponento. Ši protinga abstrakcija užtikrina, kad įvykių delegavimas veiktų sklandžiai su portalais, nepaisant jų atskiros fizinės DOM buvimo vietos.

Įvykių delegavimo įgyvendinimas su „React“ portalais

Panagrinėkime įprastą scenarijų: modalinis dialogo langas, kuris užsidaro, kai vartotojas paspaudžia už jo turinio srities (ant fono) arba paspaudžia `Escape` klavišą. Tai klasikinis portalų panaudojimo atvejis ir puiki įvykių delegavimo demonstracija.

Scenarijus: Modalinis langas, uždaromas paspaudus išorėje

Norime įgyvendinti modalinio lango komponentą naudojant „React“ portalą. Modalinis langas turėtų pasirodyti paspaudus mygtuką ir užsidaryti, kai:

• Vartotojas paspaudžia pusiau permatomą perdangą (foną), supančią modalinio lango turinį.
• Vartotojas paspaudžia `Escape` klavišą.
• Vartotojas paspaudžia aiškų „Uždaryti“ mygtuką modalinio lango viduje.

Žingsnis po žingsnio įgyvendinimas

1 žingsnis: Paruoškite HTML ir portalo komponentą

Įsitikinkite, kad jūsų `index.html` faile yra specialus šakninis elementas portalams. Šiame pavyzdyje naudosime `id="portal-root"`.

// public/index.html (fragmentas)
<body>
  <div id="root"></div>
  <div id="portal-root"></div> <!-- Mūsų portalo tikslinis elementas -->
</body>

Toliau sukurkite paprastą `Portal` komponentą, kad apgaubtumėte `ReactDOM.createPortal` logiką. Tai padarys mūsų modalinio lango komponentą švaresnį.

// components/Portal.js
import { useEffect, useState } from 'react';
import { createPortal } from 'react-dom';

interface PortalProps {
  children: React.ReactNode;
  wrapperId?: string;
}

// Sukursime div elementą portalui, jei pagal wrapperId jis dar neegzistuoja
function createWrapperAndAppendToBody(wrapperId: string) {
  const wrapperElement = document.createElement('div');
  wrapperElement.setAttribute('id', wrapperId);
  document.body.appendChild(wrapperElement);
  return wrapperElement;
}

function Portal({ children, wrapperId = 'portal-wrapper' }: PortalProps) {
  const [wrapperElement, setWrapperElement] = useState<HTMLElement | null>(null);

  useEffect(() => {
    let element = document.getElementById(wrapperId) as HTMLElement;
    let created = false;

    if (!element) {
      created = true;
      element = createWrapperAndAppendToBody(wrapperId);
    }
    setWrapperElement(element);

    return () => {
      // Išvalome elementą, jei jį sukūrėme
      if (created && element.parentNode) {
        element.parentNode.removeChild(element);
      }
    };
  }, [wrapperId]);

  // wrapperElement bus null pirmojo atvaizdavimo metu. Tai gerai, nes nieko neatvaizduosime.
  if (!wrapperElement) return null;

  return createPortal(children, wrapperElement);
}

export default Portal;

Pastaba: Paprastumo dėlei `portal-root` ankstesniuose pavyzdžiuose buvo griežtai nurodytas `index.html`. Šis `Portal.js` komponentas siūlo dinamiškesnį požiūrį, sukuriant apgaubiantį div, jei jo nėra. Pasirinkite metodą, kuris geriausiai atitinka jūsų projekto poreikius. Toliau naudosime `portal-root`, nurodytą `index.html` `Modal` komponente, dėl tiesiogumo, tačiau aukščiau pateiktas `Portal.js` yra patikima alternatyva.

2 žingsnis: Sukurkite modalinio lango komponentą

Mūsų `Modal` komponentas gaus savo turinį kaip `children` ir `onClose` atgalinio ryšio funkciją (callback).

// components/Modal.js
import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

interface ModalProps {
  isOpen: boolean;
  onClose: () => void;
  children: React.ReactNode;
}

const modalRoot = document.getElementById('portal-root') as HTMLElement;

const Modal = ({ isOpen, onClose, children }: ModalProps) => {
  const modalContentRef = useRef<HTMLDivElement>(null);

  if (!isOpen) return null;

  // Tvarkome Escape klavišo paspaudimą
  useEffect(() => {
    const handleEscape = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        onClose();
      }
    };
    document.addEventListener('keydown', handleEscape);
    return () => {
      document.removeEventListener('keydown', handleEscape);
    };
  }, [onClose]);

  // Raktas į įvykių delegavimą: vienas paspaudimo apdoroklis ant fono.
  // Jis taip pat netiesiogiai deleguoja uždarymo mygtukui modalinio lango viduje.
  const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
    // Patikriname, ar paspaudimo tikslas yra pats fonas, o ne turinys modalinio lango viduje.
    // `modalContentRef.current.contains(event.target)` naudojimas čia yra labai svarbus.
    // event.target yra elementas, iš kurio kilo paspaudimas.
    // event.currentTarget yra elementas, prie kurio pridėtas įvykio klausytojas (modal-overlay).
    if (modalContentRef.current && !modalContentRef.current.contains(event.target as Node)) {
      onClose();
    }
  };

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={handleBackdropClick}>
      <div className="modal-content" ref={modalContentRef}>
        {children}
        <button onClick={onClose} aria-label="Uždaryti modalinį langą">X</button>
      </div>
    </div>,
    modalRoot
  );
};

export default Modal;

3 žingsnis: Integruokite į pagrindinį programos komponentą

Mūsų pagrindinis `App` komponentas valdys modalinio lango atidarymo/uždarymo būseną ir atvaizduos `Modal`.

// App.js
import React, { useState } from 'react';
import Modal from './components/Modal';
import './App.css'; // Pagrindiniam stiliui

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const openModal = () => setIsModalOpen(true);
  const closeModal = () => setIsModalOpen(false);

  return (
    <div className="App">
      <h1>„React“ portalo įvykių delegavimo pavyzdys</h1>
      <p>Demonstruojamas įvykių tvarkymas skirtinguose DOM medžiuose.</p>

      <button onClick={openModal}>Atidaryti modalinį langą</button>

      <Modal isOpen={isModalOpen} onClose={closeModal}>
        <h2>Sveiki atvykę į modalinį langą!</h2>
        <p>Šis turinys atvaizduojamas „React“ portale, už pagrindinės programos DOM hierarchijos ribų.</p>
        <button onClick={closeModal}>Uždaryti iš vidaus</button>
      </Modal>

      <p>Kitas turinys už modalinio lango.</p>
      <p>Dar viena pastraipa, rodanti foną.</p>
    </div>
  );
}

export default App;

4 žingsnis: Pagrindinis stilius (App.css)

Kad vizualizuotume modalinį langą ir jo foną.

/* App.css */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 30px;
  border-radius: 8px;
  min-width: 300px;
  max-width: 80%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  position: relative; /* Reikalinga vidinių mygtukų pozicionavimui, jei yra */
}

.modal-content button {
  margin-top: 15px;
  padding: 8px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
}

.modal-content button:hover {
  background-color: #0056b3;
}

.modal-content > button:last-child { /* Stilius 'X' uždarymo mygtukui */
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    color: #333;
    font-size: 1.2rem;
    padding: 0;
    margin: 0;
    border: none;
}

.App {
  font-family: Arial, sans-serif;
  padding: 20px;
  text-align: center;
}

.App button {
  padding: 10px 20px;
  font-size: 1.1rem;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.App button:hover {
  background-color: #218838;
}

Delegavimo logikos paaiškinimas

Mūsų `Modal` komponente `onClick={handleBackdropClick}` yra pridėtas prie `.modal-overlay` div, kuris veikia kaip mūsų deleguotas klausytojas. Kai įvyksta bet koks paspaudimas šioje perdangoje (į kurią įeina `modal-content` ir `X` uždarymo mygtukas jo viduje, taip pat mygtukas 'Uždaryti iš vidaus'), vykdoma `handleBackdropClick` funkcija.

Funkcijos `handleBackdropClick` viduje:

• `event.target` nurodo konkretų DOM elementą, kuris buvo *faktiškai paspaustas* (pvz., `<h2>`, `<p>`, ar `<button>` `modal-content` viduje, arba pats `modal-overlay`).
• `event.currentTarget` nurodo elementą, prie kurio buvo pridėtas įvykio klausytojas, šiuo atveju tai yra `.modal-overlay` div.
• Sąlyga `!modalContentRef.current.contains(event.target as Node)` yra mūsų delegavimo esmė. Ji tikrina, ar paspaustas elementas (`event.target`) *nėra* `modal-content` div palikuonis. Jei `event.target` yra pats `.modal-overlay` arba bet kuris kitas elementas, kuris yra tiesioginis perdangos antrinis elementas, bet ne `modal-content` dalis, tuomet `contains` grąžins `false`, ir modalinis langas užsidarys.
• Svarbiausia, „React“ sintetinė įvykių sistema užtikrina, kad net jei `event.target` yra elementas, fiziškai atvaizduotas `portal-root`, `onClick` apdoroklys ant loginio tėvinio elemento (`.modal-overlay` `Modal` komponente) vis tiek bus suaktyvintas, o `event.target` teisingai identifikuos giliai įdėtą elementą.

Vidiniai uždarymo mygtukai veikia tiesiog iškviečiant `onClose()` jų `onClick` apdorokliuose, nes šie apdorokliai įvykdomi *prieš* įvykiui kylant iki `modal-overlay` deleguoto klausytojo, arba jie yra aiškiai apdorojami. Net jei įvykis kiltų aukštyn, mūsų `contains()` patikrinimas neleistų modaliniam langui užsidaryti, jei paspaudimas kilo iš turinio vidaus.

`useEffect` `Escape` klavišo klausytojui yra pridėtas tiesiogiai prie `document`, kas yra įprastas ir efektyvus modelis globaliems klaviatūros sparčiuosiuose klavišuose, nes tai užtikrina, kad klausytojas yra aktyvus neatsižvelgiant į komponento fokusą ir pagaus įvykius iš bet kurios DOM vietos, įskaitant tuos, kurie kyla iš portalų.

Įprastų įvykių delegavimo scenarijų sprendimas

Nepageidaujamo įvykių plitimo sustabdymas: `event.stopPropagation()`

Kartais, net ir su delegavimu, galite turėti konkrečių elementų savo deleguotoje srityje, kur norite aiškiai sustabdyti įvykio kilimą aukštyn. Pavyzdžiui, jei modalinio lango turinyje turėtumėte įdėtą interaktyvų elementą, kuris, paspaudus, *neturėtų* suaktyvinti `onClose` logikos (net jei `contains` patikrinimas tai jau sutvarkytų), galėtumėte naudoti `event.stopPropagation()`.

<div className="modal-content" ref={modalContentRef}>
  <h2>Modalinio lango turinys</h2>
  <p>Paspaudus šią sritį, modalinis langas neužsidarys.</p>
  <button onClick={(e) => {
    e.stopPropagation(); // Neleidžiame šiam paspaudimui kilti iki fono
    console.log('Paspaustas vidinis mygtukas!');
  }}>Vidinis veiksmo mygtukas</button>
  <button onClick={onClose}>Uždaryti</button>
</div>

Nors `event.stopPropagation()` gali būti naudingas, naudokite jį apdairiai. Perteklinis naudojimas gali padaryti įvykių srautą nenuspėjamu ir apsunkinti derinimą, ypač didelėse, globaliai platinamose programose, kur prie vartotojo sąsajos gali prisidėti skirtingos komandos.

Specifinių antrinių elementų tvarkymas delegavimu

Be paprasto tikrinimo, ar paspaudimas yra viduje ar išorėje, įvykių delegavimas leidžia atskirti įvairių tipų paspaudimus deleguotoje srityje. Galite naudoti savybes, tokias kaip `event.target.tagName`, `event.target.id`, `event.target.className` ar `event.target.dataset` atributus, kad atliktumėte skirtingus veiksmus.

const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {
  if (modalContentRef.current && modalContentRef.current.contains(event.target as Node)) {
    // Paspaudimas buvo modalinio lango turinio viduje
    const clickedElement = event.target as HTMLElement;

    if (clickedElement.tagName === 'BUTTON' && clickedElement.dataset.action === 'confirm') {
      console.log('Patvirtinimo veiksmas suaktyvintas!');
      onClose();
    } else if (clickedElement.tagName === 'A') {
      console.log('Paspausta nuoroda modalinio lango viduje:', clickedElement.href);
      // Galbūt išvengti numatytojo elgesio arba naršyti programiškai
    }
    // Kiti specifiniai apdorokliai elementams modalinio lango viduje
  } else {
    // Paspaudimas buvo už modalinio lango turinio ribų (ant fono)
    onClose();
  }
};

Šis modelis suteikia galingą būdą valdyti kelis interaktyvius elementus jūsų portalo turinyje naudojant vieną, efektyvų įvykio klausytoją.

Kada nedelguoti

Nors įvykių delegavimas yra labai rekomenduojamas portalams, yra scenarijų, kai tiesioginiai įvykių klausytojai ant paties elemento gali būti tinkamesni:

• Labai specifinis komponento elgesys: Jei komponentas turi labai specializuotą, autonomišką įvykių logiką, kuriai nereikia sąveikauti su jo protėvių deleguotais apdorokliais.
• Įvesties elementai su `onChange`: Valdomiems komponentams, tokiems kaip teksto įvesties laukai, `onChange` klausytojai paprastai dedami tiesiai ant įvesties elemento, kad būtų galima nedelsiant atnaujinti būseną. Nors šie įvykiai taip pat kyla aukštyn, jų tvarkymas tiesiogiai yra standartinė praktika.
• Našumui kritiški, didelio dažnio įvykiai: Įvykiams, tokiems kaip `mousemove` ar `scroll`, kurie vyksta labai dažnai, delegavimas tolimam protėviui gali sukelti nedidelį vėlavimą dėl nuolatinio `event.target` tikrinimo. Tačiau daugumai vartotojo sąsajos sąveikų (paspaudimams, klavišų paspaudimams), delegavimo nauda gerokai viršija šią minimalią kainą.

Pažangūs modeliai ir svarstymai

Sudėtingesnėms programoms, ypač toms, kurios skirtos įvairioms pasaulinėms vartotojų bazėms, galite apsvarstyti pažangesnius modelius įvykių tvarkymui portaluose.

Pasirinktinių įvykių išsiuntimas

Labai specifiniais kraštutiniais atvejais, kai „React“ sintetinė įvykių sistema nevisiškai atitinka jūsų poreikius (kas yra reta), galite rankiniu būdu išsiųsti pasirinktinius įvykius. Tai apima `CustomEvent` objekto sukūrimą ir jo išsiuntimą iš tikslinio elemento. Tačiau tai dažnai apeina „React“ optimizuotą įvykių sistemą ir turėtų būti naudojama atsargiai ir tik tada, kai tai griežtai būtina, nes tai gali sukelti priežiūros sudėtingumą.

// Portalo komponento viduje
const handleCustomAction = () => {
  const event = new CustomEvent('my-custom-portal-event', { detail: { data: 'some info' }, bubbles: true });
  document.dispatchEvent(event);
};

// Kažkur jūsų pagrindinėje programoje, pvz., effect hook'e
useEffect(() => {
  const handler = (event: Event) => {
    if (event instanceof CustomEvent) {
      console.log('Gautas pasirinktinis įvykis:', event.detail);
    }
  };
  document.addEventListener('my-custom-portal-event', handler);
  return () => document.removeEventListener('my-custom-portal-event', handler);
}, []);

Šis požiūris suteikia granuliuotą valdymą, bet reikalauja kruopštaus įvykių tipų ir duomenų valdymo.

„Context“ API įvykių apdorokliams

Didelėms programoms su giliai įdėtu portalo turiniu, `onClose` ar kitų apdoroklių perdavimas per savybes (props) gali sukelti „prop drilling“. „React“ „Context“ API suteikia elegantišką sprendimą:

// context/ModalContext.js
import React, { createContext, useContext } from 'react';

interface ModalContextType {
  onClose?: () => void;
  // Pridėkite kitus su modaliniu langu susijusius apdoroklius pagal poreikį
}

const ModalContext = createContext<ModalContextType>({});

export const useModal = () => useContext(ModalContext);

export const ModalProvider = ({ children, onClose }: ModalContextType & React.PropsWithChildren) => (
  <ModalContext.Provider value={{ onClose }}>
    {children}
  </ModalContext.Provider>
);

// components/Modal.js (atnaujinta, kad naudotų Context)
// ... (importai ir modalRoot apibrėžti)

const Modal = ({ isOpen, onClose, children }: ModalProps) => {
  const modalContentRef = useRef<HTMLDivElement>(null);
  // ... (useEffect Escape klavišui, handleBackdropClick išlieka iš esmės toks pat)

  if (!isOpen) return null;

  return ReactDOM.createPortal(
    <div className="modal-overlay" onClick={handleBackdropClick}>
      <div className="modal-content" ref={modalContentRef}>
        <ModalProvider onClose={onClose}>{children}</ModalProvider> <!-- Suteikiame kontekstą -->
        <button onClick={onClose} aria-label="Uždaryti modalinį langą">X</button>
      </div>
    </div>,
    modalRoot
  );
};

export default Modal;

// components/DeeplyNestedComponent.js (kažkur modalinio lango turinyje)
import React from 'react';
import { useModal } from '../context/ModalContext';

const DeeplyNestedComponent = () => {
  const { onClose } = useModal();

  return (
    <div>
      <p>Šis komponentas yra giliai modalinio lango viduje.</p>
      {onClose && <button onClick={onClose}>Uždaryti iš gilaus lygio</button>}
    </div>
  );
};

„Context“ API naudojimas suteikia švarų būdą perduoti apdoroklius (ar bet kokius kitus susijusius duomenis) žemyn komponentų medžiu į portalo turinį, supaprastinant komponentų sąsajas ir gerinant priežiūrą, ypač tarptautinėms komandoms, bendradarbiaujančioms prie sudėtingų vartotojo sąsajų sistemų.

Poveikis našumui

Nors pats įvykių delegavimas yra našumo didinimo priemonė, būkite atidūs savo `handleBackdropClick` ar deleguotos logikos sudėtingumui. Jei kiekvieno paspaudimo metu atliekate brangius DOM apėjimus ar skaičiavimus, tai gali paveikti našumą. Optimizuokite savo patikrinimus (pvz., `event.target.closest()`, `element.contains()`), kad jie būtų kuo efektyvesni. Labai didelio dažnio įvykiams apsvarstykite „debouncing“ ar „throttling“, jei reikia, nors tai rečiau pasitaiko paprastiems paspaudimo/klavišų paspaudimo įvykiams modaliniuose languose.

Prieinamumo (A11y) aspektai pasaulinėms auditorijoms

Prieinamumas nėra antraeilis dalykas; tai yra pagrindinis reikalavimas, ypač kuriant programą pasaulinei auditorijai su įvairiais poreikiais ir pagalbinėmis technologijomis. Naudojant portalus modaliniams langams ar panašioms perdangoms, įvykių tvarkymas atlieka lemiamą vaidmenį prieinamume:

• Fokuso valdymas: Atidarius modalinį langą, fokusas turėtų būti programiškai perkeltas į pirmąjį interaktyvų elementą modalinio lango viduje. Uždarius modalinį langą, fokusas turėtų grįžti į elementą, kuris jį atidarė. Tai dažnai tvarkoma naudojant `useEffect` ir `useRef`.
• Sąveika klaviatūra: `Escape` klavišo naudojimas uždarymui (kaip parodyta) yra esminis prieinamumo modelis. Užtikrinkite, kad visi interaktyvūs elementai modalinio lango viduje būtų pasiekiami klaviatūra (`Tab` klavišu).
• ARIA atributai: Naudokite atitinkamas ARIA roles ir atributus. Modaliniams langams būtini `role="dialog"` arba `role="alertdialog"`, `aria-modal="true"` ir `aria-labelledby` arba `aria-describedby`. Šie atributai padeda ekrano skaitytuvams pranešti apie modalinio lango buvimą ir apibūdinti jo paskirtį.
• Fokuso fiksavimas: Įgyvendinkite fokuso fiksavimą modalinio lango viduje. Tai užtikrina, kad vartotojui paspaudus `Tab`, fokusas cikliškai pereina tik per elementus *viduje* modalinio lango, o ne per elementus fono programoje. Tai paprastai pasiekiama su papildomais `keydown` apdorokliais pačiame modaliniame lange.

Patikimas prieinamumas yra ne tik apie atitiktį reikalavimams; jis išplečia jūsų programos pasiekiamumą platesnei pasaulinei vartotojų bazei, įskaitant asmenis su negalia, užtikrinant, kad visi galėtų efektyviai sąveikauti su jūsų vartotojo sąsaja.

Geriausios praktikos „React“ portalų įvykių tvarkymui

Apibendrinant, štai pagrindinės geriausios praktikos efektyviam įvykių tvarkymui su „React“ portalais:

• Taikykite įvykių delegavimą: Visada teikite pirmenybę vieno įvykio klausytojo pridėjimui prie bendro protėvio (pavyzdžiui, modalinio lango fono) ir naudokite `event.target` su `element.contains()` ar `event.target.closest()`, kad nustatytumėte paspaustą elementą.
• Supraskite „React“ sintetinius įvykius: Atminkite, kad „React“ sintetinė įvykių sistema efektyviai peradresuoja įvykius iš portalų, kad jie kiltų aukštyn savo loginiu „React“ komponentų medžiu, todėl delegavimas yra patikimas.
• Apdairiai valdykite globalius klausytojus: Globaliems įvykiams, tokiems kaip `Escape` klavišo paspaudimai, pridėkite klausytojus tiesiogiai prie `document` `useEffect` hook'e, užtikrindami tinkamą išvalymą.
• Minimizuokite `stopPropagation()`: Naudokite `event.stopPropagation()` saikingai. Tai gali sukurti sudėtingus įvykių srautus. Projektuokite savo delegavimo logiką taip, kad ji natūraliai tvarkytų skirtingus paspaudimo tikslus.
• Teikite pirmenybę prieinamumui: Nuo pat pradžių įgyvendinkite visapusiškas prieinamumo funkcijas, įskaitant fokuso valdymą, naršymą klaviatūra ir atitinkamus ARIA atributus.
• Naudokite `useRef` DOM nuorodoms: Naudokite `useRef` tiesioginėms nuorodoms į DOM elementus gauti savo portale, kas yra labai svarbu `element.contains()` patikrinimams.
• Apsvarstykite „Context“ API sudėtingoms savybėms: Giliems komponentų medžiams portaluose naudokite „Context“ API, kad perduotumėte įvykių apdoroklius ar kitą bendrą būseną, sumažindami „prop drilling“.
• Kruopščiai testuokite: Atsižvelgiant į portalų tarp-DOM prigimtį, kruopščiai testuokite įvykių tvarkymą įvairiose vartotojo sąveikose, naršyklės aplinkose ir su pagalbinėmis technologijomis.

Išvada

„React“ portalai yra nepakeičiamas įrankis kuriant pažangias, vizualiai patrauklias vartotojo sąsajas. Tačiau jų galimybė atvaizduoti turinį už tėvinio komponento DOM hierarchijos ribų kelia unikalių svarstymų įvykių tvarkymui. Suprasdami „React“ sintetinę įvykių sistemą ir įvaldę įvykių delegavimo meną, programuotojai gali įveikti šiuos iššūkius ir kurti labai interaktyvias, našias ir prieinamas programas.

Įvykių delegavimo įgyvendinimas užtikrina, kad jūsų globalios programos suteiktų nuoseklią ir patikimą vartotojo patirtį, nepriklausomai nuo pagrindinės DOM struktūros. Tai veda prie švaresnio, lengviau prižiūrimo kodo ir atveria kelią mastelio keitimui pritaikytam vartotojo sąsajos kūrimui. Taikykite šiuos modelius, ir būsite gerai pasirengę išnaudoti visą „React“ portalų galią savo kitame projekte, teikdami išskirtines skaitmenines patirtis vartotojams visame pasaulyje.